<template>
  <div>
    <div class="d-flex align-item-center mb-1">
      <div class="flex-grow-1">项目金额分析</div>
    </div>
    <el-echarts
      :option="option"
      ref="echarts"
      theme="macarons"
      @onInit="onInit"
      :height="240"
    ></el-echarts>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {},
  data() {
    return {
      orgClass: '',
      chart: {},
      option: null,
      level: 0,
      cityData: [],
      countyData: [],
      tableName: 'loan_funds_bank_view',
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId', 'org']),
    orgCode() {
      return this.org.orgCode
    },
  },
  watch: {},
  created() {
    this.orgClass = this.$utils.getClientOrgClass()
    this.getData()
  },
  mounted() {},
  methods: {
    onInit(chart) {
      this.chart = chart
    },
    async getData() {
      const sumKeys = [
        'loan_on_10_funds',
        'loan_on_300_funds',
        'loan_on_1000_funds',
        'loan_on_1000_above_funds',
      ]
      const groupFunc = sumKeys
        .reduce((a, b) => {
          a.push(`round(sum(${b}))`)
          return a
        }, [])
        .join(',')
      const params = {
        isBIQuery: 1,
        'bank_code.endlike': this.orgCode,
        groupFunc: groupFunc,
      }
      const [res, err] = await this.fetchData(params)
      this.cityData = res.data || {}
      if (err) {
        this.$message.error('请求数据失败，请重试！')
      }
      this.setCity()
    },
    setCity() {
      const obj = {
        p: '10万元以下',
        p1: '10万元(含)~300万元(含)',
        p2: '300万元~1000万元(含)',
        p3: '1000万元以上',
      }
      const data = {
        name: [],
        value: [],
        selected: {},
      }
      const item = this.cityData[0] || {}
      Object.keys(obj).forEach(key => {
        data.selected[obj[key]] = +item[key]
        data.name.push(obj[key])
        data.value.push({
          name: obj[key],
          value: +item[key],
        })
      })
      this.setOption(data)
    },
    fetchData(params) {
      return this.$utils.promise(this.$api.getData(this.$serviceName, this.tableName, params))
    },
    setOption(data) {
      this.option = {
        title: {
          text: '项目分析',
          show: false,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : <br>金额： {c}万元 <br> 占比： {d}%',
        },
        legend: {
          data: data.name,
          top: 190,
          height: 100,
          left: 10,
          selected: data.selected,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            saveAsImage: { show: true },
          },
        },

        series: [
          {
            type: 'pie',
            name: '项目金额分析',
            markPoint: { silent: true },
            radius: '40%',
            clockwise: false,
            center: ['50%', '45%'],
            data: data.value,
            // itemStyle: {
            //   emphasis: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // },
            label: {
              normal: {
                show: true,
                position: 'inner',
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16,
                },
                formatter: '{d}%',
              },
            },
          },
          {
            type: 'pie',
            name: '项目金额分析',
            radius: '40%',
            clockwise: false,
            center: ['50%', '45%'],
            data: data.value,
            // itemStyle: {
            //   emphasis: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // },
            label: {
              formatter: '{b}:  \n金额： {c}万元',
            },
          },
        ],
      }
    },
  },
}
</script>
<style scoped></style>
